{
    let Img = document.querySelectorAll('.img')
    let oList = document.querySelectorAll('.list')

    oList.forEach((ele, index) => {
        ele.addEventListener('mouseover', function () {
            Img[index].style.display = 'block'
        })
        ele.addEventListener('mouseout', function () {
            Img[index].style.display = 'none'
        })
    })
}
{
    let Navigation = document.querySelector('.Navigation')
    let oUl = document.querySelector('.Navigation ul')
    let oBtn = document.querySelector('.button')
    let add = document.querySelector('.add')
    let internet = document.querySelector('.internet')
    let Name = internet.querySelector('.name')
    let href = internet.querySelector('.href')
    let favicon = internet.querySelector('.favicon')
    let sort = internet.querySelector('.sort')
    let Close = internet.querySelector('.close')
    let addList = internet.querySelector('.addlist')
    oBtn.addEventListener('click', function () {
        add.style.display = 'none'
        Navigation.style.height = '197px'
        internet.style.display = 'block'
    })
    favicon.addEventListener('input',function(){
        if(Name.value != ''){
            favicon.value = href.value + 'favicon.ico'
        }
    })
    Close.addEventListener('click', function () {
        add.style.display = 'block'
        add.style.display = 'flex'
        Navigation.style.height = '84px'
        internet.style.display = 'none'
    })

    /* favicon.innerHTML = `${href}favicon.ico` */
    function gata() {
        let li = document.createElement('li')
        li.innerHTML += `<a href="${href.value}">
        <img src="${favicon.value}" alt="">
        <span>${Name.value}</span>
    </a>`
        add.insertBefore(li,add.children[0])
        Name.value = ''
        favicon.value = ''
        href.value = ''
    }
    addList.addEventListener('click',function(){
        gata()
        add.style.display = 'block'
        add.style.display = 'flex'
        Navigation.style.height = '84px'
        internet.style.display = 'none'
        
    })
}